<template>
	<view>
		<cu-custom bgColor="bg-blue-1" :isBack="true">
			<view slot="backText">
				返回
			</view>
			<view slot="content">
				请假申请
			</view>
		</cu-custom>
		<view v-if="!ifBind" class="margin-sm padding-sm bg-white" style="border-radius:20rpx;">
			<view class="cu-list menu sm-border">
				<view class="cu-form-group">
					<view class="title">请假人</view>
					<input v-model='leave_info.nickname' placeholder="请输入姓名"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">学号</view>
					<input v-model='leave_info.username' placeholder="请输入学号"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">辅导员</view>
					<input v-model='leave_info.tname' placeholder="请输入辅导员"></input>
				</view>

				<view class="uni-form-item cu-form-group">
					<view class="title">请假时间</view>
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view>{{date}}</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">请假原因</view>
					<input v-model='leave_info.reason' placeholder="请输入请假原因"></input>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-orange-1 round shadow-blur lg" @click="bindDorm">提交请假申请</button>
			</view>
		</view>
		<view class="animation-slide-bottom margin list-container" v-if="leaveList.length">
			<view class="list-head bg-blue-1">
				<view class="list-head_table_head">
					请假原因
				</view>
				<view class="list-head_table_head">
					请假时间
				</view>
				<view class="list-head_table_head">
					申请状态
				</view>
			</view>
			<view class="list-item text-black" v-for='(item, index) in leaveList' :key='index'
				:class="index%2?'bg-gray':'bg-white'">
				<view class="">
					<text class="text-bold">{{item.reason}}</text>
				</view>
				<view class="list-subitem margin-top-sm">
					<view class="">
						<text class="text-bold">辅导员:{{item.tname}}</text>
					</view>

					<view class="">
						{{item.leavetime}}
					</view>
					<view class="" v-if="item.status===1" style="color: #39B54A;">
						审核通过
					</view>
					<view class="" v-else-if="item.status===0" style="color: #007AFF;">
						审核中
					</view>
					<view class="" v-else style="color: red;">
						审核不通过
					</view>
				</view>
			</view>
		</view>
		<view v-else="leaveList.length">
			暂无请假申请
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				dormName: '',
				dushu: 'NaN',
				userInfo: {},
				wxInfo: {},
				leave_info: {},
				leaveList: [],
				date: currentDate,
			}
		},
		created() {
			// this.ifBind = this.judgeBind()
			this.init()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			init: function() {
				this.userInfo = uni.getStorageSync("user_info")
				this.leave_info.nickname = this.userInfo.nickName
				this.leave_info.username = this.userInfo.username
				this.getLeaveList()
			},
			bindDateChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.date = e.target.value
			},
			// 生活区变更
			getLeaveList() {
				let postData = {
					uid: uni.getStorageSync('user_info').id,
				}
				this.$reqJson("wxapi/wxleave/list", "post", postData, res => {
					if (res.content) {
						this.leaveList = res.content
					}

				})
			},
			// 申请请假
			bindDorm() {
				if (this.leave_info.reason) {
					this.leave_info.uid = this.userInfo.id
					this.leave_info.nickname = this.userInfo.nickName
					this.leave_info.username = this.userInfo.username
					this.leave_info.status = 0
					this.leave_info.leavetime = this.date
					console.log('leave_info 表：', this.leave_info)
					this.$reqJson("wxapi/wxleave", "post", this.leave_info, res => {
						if (!res) {
							uni.showModal({
								title: '提示',
								content: '申请成功，等待审核',
								showCancel: false,
							})
							this.getLeaveList()
						} else {
							uni.showModal({
								title: '提示',
								content: '申请失败，请重试',
								showCancel: false,
							})
						}
					})
				} else {
					uni.showModal({
						content: "请输入请假原因",
						showCancel: false
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
		overflow: hidden;

		.wave {
			position: relative;
			width: 300rpx;
			height: 300rpx;
			background-color: rgb(118, 218, 255);
			border-radius: 50%;
			border: 2px solid #f1f1f1;

			&::before,
			&::after {
				content: "";
				position: absolute;
				width: 600rpx;
				height: 600rpx;
				top: 0;
				left: 50%;
				background-color: rgba(255, 255, 255, .4);
				border-radius: 45%;
				transform: translate(-50%, -70%) rotate(0);
				animation: rotate 6s linear infinite;
				z-index: 10;
			}

			&::after {
				border-radius: 47%;
				background-color: rgba(255, 255, 255, .7);
				transform: translate(-50%, -70%) rotate(0);
				animation: rotate 10s linear -5s infinite;
				z-index: 20;
			}
		}


		@keyframes rotate {
			50% {
				transform: translate(-50%, -73%) rotate(180deg);
			}

			100% {
				transform: translate(-50%, -70%) rotate(360deg);
			}
		}

		.dushu {
			position: absolute;
			top: 150rpx;
			left: 150rpx;
			z-index: 99;
			transform: translate(-50%, -50%);
		}
	}
</style>
